<template>
  <el-form ref="ruleFormRef" :model="ruleForm" inline class="demo-ruleForm" label-position="left">
    <el-form-item label="姓名：" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="性别：" prop="sex">
      <el-select v-model="ruleForm.sex" clearable>
        <el-option label="男" :value="1" />
        <el-option label="女" :value="2" />
      </el-select>
    </el-form-item>
    <el-form-item label="电话：" prop="mobileNo">
      <el-input v-model="ruleForm.mobileNo" />
    </el-form-item>
    <el-form-item label="审核状态：" prop="status">
      <el-select v-model="ruleForm.status" clearable>
        <el-option label="未审核" :value="0" />
        <el-option label="已通过" :value="1" />
        <el-option label="已拒绝" :value="2" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary"  @click="searchApi()">搜索</el-button>
      <el-button type="danger" @click="resetApi">重置</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableList" style="width: 100%" v-loading="loading">
    <el-table-column type="index" width="80" label="序号" align="center" />
    <el-table-column prop="name" label="名字" align="center" />
    <el-table-column label="性别"   align="center">
      <template #default="scope">
        <span>{{ scope.row.sex == 1 ? '男' : '女' }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="idNo" label="身份证" align="center" />
    <el-table-column prop="mobileNo" label="电话" align="center" />
    <el-table-column prop="registerTime" label="注册时间" align="center" />
    <el-table-column label="审核状态"   align="center">
      <template #default="scope">
        
        <el-tag class="ml-2" v-if="scope.row.status==0">未审核</el-tag>
        <el-tag class="ml-2" type="success" v-if="scope.row.status==1">已通过</el-tag>
        <el-tag class="ml-2" type="danger" v-if="scope.row.status==2">已拒绝</el-tag>
       
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button type="primary" @click="getDetailApi(scope.row.id)" >{{scope.row.status==0?'审核':'查看详情'}}</el-button>
      </template>
    </el-table-column>
  </el-table>

  <footer class="pagination">
    <el-pagination
      v-model:currentPage="ruleForm.page"
      v-model:page-size="ruleForm.limit"
      :page-sizes="[10, 20, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      small
    />
  </footer>

  <!-- 审核弹框 -->
  <el-dialog v-model="dialogVisible" width="20%" title="司机详情" :close-on-click-modal="false">
    <el-row>
      <el-col :span="5">姓名：</el-col>
      <el-col :span="19">{{ detail.name }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="5">性别：</el-col>
      <el-col :span="19">{{ detail.sex == 1 ? '男' : '女' }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="5">电话：</el-col>
      <el-col :span="19">{{ detail.mobileNo }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="5">身份：</el-col>
      <el-col :span="19">{{ detail.idNo }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="5">驾驶证正面：</el-col>
      <el-col :span="19">
        <el-image
          style="width: 100px; height: 100px"
          :src="detail.drivingLicenseTopsideUrl"
          fit="contain"
        />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="5">驾驶证背面：</el-col>
      <el-col :span="19">
        <el-image
          style="width: 100px; height: 100px"
          :src="detail.drivingLicenseBacksideUrl"
          fit="contain"
      /></el-col>
    </el-row>

    <footer v-if="detail.status==0">
      <el-button type="primary" size="large" @click="driverAuditApi(1)">通过</el-button>
      <el-button type="danger" size="large" @click="driverAuditApi(2)">拒绝</el-button>
    </footer>
  </el-dialog>
</template>

<script lang="ts" setup>
import api from '@/api/apis/driverExamine'
import { onMounted, reactive, ref } from 'vue'

const ruleForm = reactive({
  name: '',
  sex: null,
  mobileNo: '',
  status: null,
  page: 1,
  
  limit: 20,
})
const statusName = (key: number) => {
  let obj: any = {
    0: '未审核',
    1: '已通过',
    2: '已拒绝',
  }
  return obj[key]
}
//表格数据
const tableList = ref([])

onMounted(() => {
  getTableList()
})
const searchApi = () => {
  ruleForm.page = 1
  getTableList()
}
//获取表格数据
const getTableList = async () => {
  loading.value = true
  let { data } = await api.getDriverPage({
    current: ruleForm.page,
    pageSize: ruleForm.limit,
    searchCount: true,
    queryRo: {
      mobileNo: ruleForm.mobileNo,
      name: ruleForm.name,
      sex: ruleForm.sex,
      status: ruleForm.status,
    },
  })
  tableList.value = data.data.rows
  total.value = Number(data.data.total)
  loading.value = false
}
//改变每页条数
const handleSizeChange = (val: number) => {
  ruleForm.page = 1
  ruleForm.limit = val
  getTableList()
}
//改变当前页数
const handleCurrentChange = (val: number) => {
  ruleForm.page = val
  getTableList()
}

//加载
const loading = ref(false)

//总数
const total = ref(0)

//弹框开关
const dialogVisible = ref(false)

const detail = ref({
  drivingLicenseBacksideUrl: '',
  drivingLicenseTopsideUrl: '',
  idNo: '',
  mobileNo: '',
  name: '',
  sex: 0,
  status:0,
  id: 0,
})

//查看详情
const getDetailApi = async (id: string) => {
  let { data } = await api.getDriverById(id)
  if (data.code == 200) {
    detail.value = data.data
    dialogVisible.value = true
  }
}
//审核
const driverAuditApi = async (status: number) => {
  let { data } = await api.driverAudit({ id: detail.value.id, status })
  if (data.code == 200) {
    dialogVisible.value = false
    getTableList()
  }
}
//
const ruleFormRef=ref()

const resetApi=()=>{
  ruleFormRef.value.resetFields();
  searchApi()
}


</script>

<style scoped>
footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.el-row {
  margin-bottom: 10px;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}
</style>
